<template>
  <u-modal v-model:visible="selfVisible" full-screen closable>
    <template #header>
      <slot name="title">
        {{ title }}
      </slot>
    </template>
    <slot />
    <template v-if="showFooter" #footer>
      <slot name="footer">
        <div class="full-actions">
          <u-button type="primary" @click="handleConfirm">
            确定
          </u-button>
        </div>
      </slot>
    </template>
  </u-modal>
</template>
<script>
import { ref, watch } from 'vue'

export default {
  name: 'FullScreen',
  props: {
    full: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    showFooter: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:full', 'confirm'],
  setup(props, { emit }) {
    const selfVisible = ref(props.full)
    watch(() => props.full, () => {
      selfVisible.value = props.full
    })

    watch(selfVisible, nextVisible => {
      emit('update:full', nextVisible)
    })

    const handleConfirm = () => {
      emit('update:full', false)
      emit('confirm')
    }

    return {
      selfVisible,
      handleConfirm
    }
  }
}
</script>
<style lang="less">
</style>
